"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { useParams } from "next/navigation";

// 模拟新闻数据 - 实际应用中应从API获取
const newsData = [
  {
    id: 1,
    title: "百善家政荣获'2023年度优秀家政服务企业'称号",
    date: "2023-12-20",
    category: "公司新闻",
    summary: "近日，在2023年度家政行业评选中，百善家政凭借优质的服务和良好的口碑，荣获'2023年度优秀家政服务企业'称号。",
    image: "/images/news1.jpg",
    tags: ["企业荣誉", "行业评选", "服务质量"],
    content: "近日，在2023年度家政行业评选中，百善家政凭借优质的服务和良好的口碑，荣获'2023年度优秀家政服务企业'称号。这是对我们多年来坚持服务品质的肯定，也是对我们全体员工辛勤工作的认可。百善家政将继续秉承'用心服务每一个家庭'的理念，不断提升服务质量，为更多家庭提供专业、贴心的家政服务。"
  },
  {
    id: 2,
    title: "百善家政举办'专业月嫂技能大赛'，提升服务质量",
    date: "2023-11-15",
    category: "公司新闻",
    summary: "为了进一步提升月嫂服务质量，百善家政于上月举办了'专业月嫂技能大赛'，来自全国各地的优秀月嫂参加了比赛。",
    image: "/images/news2.jpg",
    tags: ["月嫂服务", "技能大赛", "服务提升"],
    content: "为了进一步提升月嫂服务质量，百善家政于上月举办了'专业月嫂技能大赛'，来自全国各地的优秀月嫂参加了比赛。比赛内容包括婴儿护理、产妇照顾、营养餐制作等多个环节，全面考验月嫂的专业技能和应变能力。通过此次比赛，不仅选拔出了一批技能出众的优秀月嫂，也促进了经验交流和技能提升，为客户提供更优质的服务奠定了基础。"
  },
  {
    id: 3,
    title: "如何选择合适的育儿嫂？这些标准要知道",
    date: "2023-10-28",
    category: "家政知识",
    summary: "选择一位合适的育儿嫂对宝宝的成长至关重要。本文将为您介绍选择育儿嫂的关键标准，帮助您做出明智的选择。",
    image: "/images/news3.jpg",
    tags: ["育儿嫂", "选择标准", "育儿知识"],
    content: "选择一位合适的育儿嫂对宝宝的成长至关重要。本文将为您介绍选择育儿嫂的关键标准，帮助您做出明智的选择。首先，要看育儿嫂的专业资质和经验，优秀的育儿嫂应具备相关证书和丰富的实践经验；其次，观察育儿嫂与孩子的互动方式，良好的沟通和耐心是必不可少的；第三，了解育儿嫂的教育理念是否与家庭一致；最后，考虑育儿嫂的健康状况和个人品质。百善家政提供严格筛选的专业育儿嫂，满足不同家庭的需求。"
  },
  {
    id: 4,
    title: "家庭保洁小技巧：如何有效去除顽固污渍",
    date: "2023-10-15",
    category: "家政知识",
    summary: "日常生活中，我们经常会遇到各种顽固污渍。本文分享一些实用的清洁技巧，帮助您轻松去除各类顽固污渍。",
    image: "/images/news4.jpg",
    tags: ["家庭保洁", "清洁技巧", "污渍去除"],
    content: "日常生活中，我们经常会遇到各种顽固污渍。本文分享一些实用的清洁技巧，帮助您轻松去除各类顽固污渍。对于油渍，可以使用洗洁精或小苏打粉；对于水垢，可以使用白醋浸泡后擦拭；对于墙面的铅笔痕迹，可以用橡皮擦或面包屑轻轻擦拭；对于地毯上的污渍，可以先用纸巾吸干，再用专业清洁剂处理。正确的清洁方法不仅能有效去除污渍，还能延长家居用品的使用寿命。"
  },
  {
    id: 5,
    title: "百善家政新增'智慧养老'服务，满足多样化需求",
    date: "2023-09-20",
    category: "公司新闻",
    summary: "为了更好地满足老年人的多样化需求，百善家政近日推出了'智慧养老'服务，结合科技手段提供更全面的养老解决方案。",
    image: "/images/news5.jpg",
    tags: ["智慧养老", "新服务", "老年护理"],
    content: "为了更好地满足老年人的多样化需求，百善家政近日推出了'智慧养老'服务，结合科技手段提供更全面的养老解决方案。该服务包括智能健康监测、远程医疗咨询、紧急呼叫系统等功能，通过科技手段提升养老服务的便捷性和安全性。同时，我们的专业护理人员会定期上门提供生活照料、健康管理等服务，确保老年人得到全方位的关怀。'智慧养老'服务的推出，标志着百善家政在养老服务领域迈出了创新的一步。"
  },
  {
    id: 6,
    title: "家政服务行业发展趋势分析：品质化、专业化成主流",
    date: "2023-09-05",
    category: "行业资讯",
    summary: "随着人们生活水平的提高，家政服务行业正朝着品质化、专业化方向发展。本文分析了当前家政服务行业的发展趋势。",
    image: "/images/news6.jpg",
    tags: ["行业趋势", "品质服务", "专业化"],
    content: "随着人们生活水平的提高，家政服务行业正朝着品质化、专业化方向发展。本文分析了当前家政服务行业的发展趋势。首先，消费者对服务质量的要求不断提高，推动了家政服务的品质化发展；其次，家政服务的细分领域越来越专业，如月嫂、育儿嫂、养老护理等都需要专业的知识和技能；第三，互联网技术的应用使家政服务更加便捷高效；最后，规范化管理和品牌化经营成为行业发展的必然趋势。百善家政将紧跟行业发展趋势，不断提升服务品质和专业水平。"
  },
  {
    id: 7,
    title: "百善家政开展员工培训，提升服务水平",
    date: "2023-08-18",
    category: "公司新闻",
    summary: "为了提升服务水平，百善家政近日开展了一系列员工培训活动，内容涵盖专业技能、服务礼仪、沟通技巧等多个方面。",
    image: "/images/news7.jpg",
    tags: ["员工培训", "服务提升", "专业技能"],
    content: "为了提升服务水平，百善家政近日开展了一系列员工培训活动，内容涵盖专业技能、服务礼仪、沟通技巧等多个方面。此次培训邀请了行业资深专家进行授课，通过理论讲解和实践演练相结合的方式，帮助员工掌握最新的服务技能和标准。培训结束后，还进行了严格的考核评估，确保培训效果。百善家政一直注重员工的专业发展，定期组织各类培训活动，不断提升团队的整体素质和服务能力。"
  },
  {
    id: 8,
    title: "科学护理老人的方法与技巧",
    date: "2023-08-05",
    category: "家政知识",
    summary: "老年人的护理需要专业的知识和技巧。本文介绍了科学护理老人的方法，帮助家庭更好地照顾老年人。",
    image: "/images/news8.jpg",
    tags: ["老人护理", "养老知识", "健康管理"],
    content: "老年人的护理需要专业的知识和技巧。本文介绍了科学护理老人的方法，帮助家庭更好地照顾老年人。首先，要注意老年人的饮食健康，制定合理的膳食计划；其次，帮助老年人保持适当的运动，增强体质；第三，关注老年人的心理健康，多与老人沟通交流；第四，创造安全舒适的居住环境，预防意外伤害；最后，定期带老人进行健康检查，及时发现和处理健康问题。科学的护理方法不仅能提高老年人的生活质量，也能减轻家庭的照料负担。"
  },
];

export default function NewsDetailPage() {
  const params = useParams();
  const [news, setNews] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [relatedNews, setRelatedNews] = useState<any[]>([]);

  useEffect(() => {
    // 获取新闻ID
    const newsId = parseInt(params.id as string);
    
    // 查找对应的新闻
    const foundNews = newsData.find(item => item.id === newsId);
    
    if (foundNews) {
      setNews(foundNews);
      
      // 获取相关新闻（同类别的其他新闻）
      const related = newsData
        .filter(item => item.category === foundNews.category && item.id !== newsId)
        .slice(0, 3);
      setRelatedNews(related);
      
      setLoading(false);
    } else {
      setError(true);
      setLoading(false);
    }
  }, [params.id]);

  if (loading) {
    return (
      <div className="flex justify-center items-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  if (error || !news) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen px-4">
        <svg
          className="h-16 w-16 text-gray-400 mb-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
        <h1 className="text-2xl font-bold text-gray-900 mb-2">未找到新闻</h1>
        <p className="text-gray-600 mb-6">抱歉，您请求的新闻不存在或已被删除</p>
        <Link
          href="/news"
          className="bg-blue-600 text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition-colors"
        >
          返回新闻列表
        </Link>
      </div>
    );
  }

  return (
    <div className="flex flex-col">
      {/* 新闻头部 */}
      <section className="bg-blue-600 text-white py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <span className="inline-block bg-blue-800 text-white text-sm px-3 py-1 rounded-full mb-4">
            {news.category}
          </span>
          <h1 className="text-4xl font-bold mb-4">{news.title}</h1>
          <p className="text-xl max-w-3xl mx-auto mb-6">{news.summary}</p>
          <div className="flex justify-center items-center text-sm">
            <span>{news.date}</span>
            <span className="mx-2">•</span>
            <div className="flex space-x-2">
              {news.tags.map((tag: string) => (
                <span key={tag} className="bg-blue-700 px-2 py-1 rounded text-xs">
                  #{tag}
                </span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 新闻内容 */}
      <section className="py-12">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="mb-8 relative h-96 rounded-lg overflow-hidden">
            <Image
              src={news.image}
              alt={news.title}
              fill
              className="object-cover"
            />
          </div>

          <div className="prose prose-lg max-w-none">
            {news.content.split('\n').map((paragraph: string, index: number) => (
              <p key={index} className="mb-4 text-gray-700">
                {paragraph}
              </p>
            ))}
          </div>

          {/* 分享按钮 */}
          <div className="mt-12 border-t border-gray-200 pt-8">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">分享这篇文章</h3>
            <div className="flex space-x-4">
              <button className="bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700">
                <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
                </svg>
              </button>
              <button className="bg-sky-500 text-white p-2 rounded-full hover:bg-sky-600">
                <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                </svg>
              </button>
              <button className="bg-green-600 text-white p-2 rounded-full hover:bg-green-700">
                <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M8.268 2C3.943 2 0 5.47 0 9.71c0 2.33 1.17 4.44 3.02 5.8L2.48 18l3.03-1.54c0.98 0.25 2.01 0.39 3.08 0.39 0.12 0 0.24 0 0.36-0.01 0.31-3.93 3.7-7.06 7.88-7.06 0.3 0 0.6 0.02 0.9 0.05C16.44 5.59 12.69 2 8.27 2h0z M23.5 15.52c0-3.59-3.59-6.5-8-6.5s-8 2.91-8 6.5c0 3.59 3.59 6.5 8 6.5 0.93 0 1.84-0.13 2.69-0.36l2.44 1.34-0.67-2.21c1.94-1.14 3.54-3.01 3.54-5.27z" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* 相关新闻 */}
      {relatedNews.length > 0 && (
        <section className="py-12 bg-gray-50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-2xl font-bold text-gray-900 mb-8">相关新闻</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {relatedNews.map((item) => (
                <div
                  key={item.id}
                  className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
                >
                  <div className="h-48 relative">
                    <Image
                      src={item.image}
                      alt={item.title}
                      fill
                      className="object-cover"
                    />
                  </div>
                  <div className="p-6">
                    <div className="flex justify-between items-center mb-2">
                      <span className="text-sm text-blue-600 font-medium">
                        {item.category}
                      </span>
                      <span className="text-sm text-gray-500">{item.date}</span>
                    </div>
                    <h3 className="text-xl font-semibold text-gray-900 mb-2">
                      {item.title}
                    </h3>
                    <p className="text-gray-600 mb-4 line-clamp-2">
                      {item.summary}
                    </p>
                    <Link
                      href={`/news/${item.id}`}
                      className="text-blue-600 font-medium hover:text-blue-800"
                    >
                      阅读更多 &rarr;
                    </Link>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* 返回按钮 */}
      <section className="py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <Link
            href="/news"
            className="inline-flex items-center text-blue-600 hover:text-blue-800"
          >
            <svg
              className="h-5 w-5 mr-2"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M10 19l-7-7m0 0l7-7m-7 7h18"
              />
            </svg>
            返回新闻列表
          </Link>
        </div>
      </section>
    </div>
  );
} 